import React, { FC } from 'react';
import styles from './index.module.less';

interface LabelInterface {
  label: string;
  value: any;
  render?: Function;
}

interface Props {
  data: LabelInterface;
  width?: number;
}

const DetailColumnText: FC<Props> = (props: Props) => {
  const { data } = props;
  const width = props.width || 100;
  const value = data.value || '暂无';
  
  return (
    <div className={styles.detailColumn}>
      <div className={styles.detailLabel} style={{ width }}>
        {data.label}：
      </div>
      <div className={styles.detailValue}>
        {typeof data.render === 'function' ? data.render() : value}
      </div>
    </div>
  );
};

export default DetailColumnText;
